import monsterImg from './monsterImg';
import { onMounted, ref, nextTick } from "vue";
import store from "@/store/index.js";

export const useUserLogin = () => {
    // 创建引用变量
    const usernameInputRef = ref(null); // 用户名输入框
    const passwordInputRef = ref(null); // 密码输入框

    // 当前图片
    let monsterCurrentImg = ref(monsterImg.idle1);
    // 当焦点在输入框中时，停止更换图片
    let seguirPunteroMouse = true;
    // 宽度的一半
    const anchoMitad = window.innerWidth / 5;
    // 高度的三分之一
    const altoMitad = window.innerHeight / 3;
    onMounted(async () => {
        await nextTick(); // 等待 DOM 元素渲染完成

        // 将界面分为4块，分别为：左上角，左下角，右上角，右下角
        // 鼠标移动的当前角度时，更换怪兽
        document.addEventListener('mousemove', (event) => {
            if (seguirPunteroMouse) {
                if (event.clientX < anchoMitad && event.clientY < altoMitad) {
                    monsterCurrentImg.value = monsterImg.idle2;
                } else if (event.clientX < anchoMitad && event.clientY > altoMitad) {
                    monsterCurrentImg.value = monsterImg.idle3;
                } else if (event.clientX > anchoMitad && event.clientY < altoMitad) {
                    monsterCurrentImg.value = monsterImg.idle5;
                } else {
                    monsterCurrentImg.value = monsterImg.idle4;
                }
            }
        });
        // 获取焦点时执行的函数
        // 获取焦点时执行的函数
        console.log(store.state.login.seguirPunteroMouse)
        console.log(passwordInputRef.value instanceof HTMLElement)
        if (passwordInputRef.value instanceof HTMLElement) {
            passwordInputRef.value.addEventListener('focus', handleFocus);
        }
    })
    const handleFocus = () => {
        // 在这里执行您的逻辑
        console.log('Password input is focused!');
    };
// 获取焦点时执行的函数


    return {
        monsterCurrentImg,
        usernameInputRef,
        passwordInputRef
    };
};
